<template>
  <div v-loading="loading" style="width: 100%">
    <div class="song" v-for="(item, index) in dataList" :key="'song' + index">
      <div class="name">
        <span class="iconfont icon-play" @click="gotoPlay(item.id)"></span>
        <span @click="gotoComment(item.id)">{{ item.name }}</span>
        <span
          class="iconfont icon-editmedia"
          @click="gotoMv(item.mvid)"
          v-if="item.mvid !== 0"
        ></span>
      </div>
      <div class="singer">{{ item.artists | getArtists }}</div>
      <div class="album">《{{ item.album.name }}》</div>
      <div class="time">{{ item.duration | formatTime }}</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loading: false,
      dataList: [],
    };
  },
  created() {
    this.getSongList(this.$route.params.musicName);
  },
  watch: {
    "this.$route.params.musicName": function (newVal) {
      this.getSongList(newVal);
    },
  },
  methods: {
    async getSongList(key) {
      this.loading = true;
      let res = await axios(`https://autumnfish.cn/search?keywords=${key}`);
      this.loading = false;
      this.dataList = res.data.result.songs;
    },
    gotoPlay(id) {
      this.$router.push("/player/" + id);
    },
    gotoComment(id) {
      this.$router.push("/comments/" + id);
    },
    gotoMv(id) {
      this.$router.push("/video/" + id);
    },
  },
  filters: {
    formatTime(time) {
      let seconds = parseInt(time / 1000) % 60;
      let minutes = parseInt(time / 1000 / 60);
      // seconds = seconds < 10 ? "0" + seconds : seconds;
      // minutes = minutes < 10 ? "0" + minutes : minutes;
      return minutes + "分" + seconds + "秒";
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/results.css");
</style>